<template>
  <div id="nav" style="width: 100%">
    <div class="head w">
      <!-- 左侧logo区域 -->
      <div class="left">
        <div class="logo">
          <a href="/">
            <img src="../../assets/img/logo.png" alt="" />
          </a>
        </div>
      </div>
      <!-- 中间导航列表区域 -->
      <ul class="center">
        <li><router-link to="/">发现音乐</router-link></li>
        <li><router-link to="/Top">排行榜</router-link></li>
        <li><router-link to="/Playlist">歌单</router-link></li>
        <li><router-link to="/Singer">歌手</router-link></li>
        <li><router-link to="/Video">视频</router-link></li>
        <li><router-link to="/MV">MV</router-link></li>
        <li><router-link to="">GITEE</router-link></li>
      </ul>

      <!-- 右侧搜索和登录 -->
      <div>
        <div class="right">
          <img
            src="../../assets/img/search.png"
            alt=""
            @click="dialogVisible = true"
          />|
          <a href="">登录</a>
        </div>
      </div>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        :append-to-body="true"
        :show-close="false"
      >
        <el-input v-model="input" placeholder="请输入内容"></el-input>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// import "../../assets/css/iconfont.css";
export default {
  name: "NaviGation",
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      dialogVisible: false,
      isactive: true,
      input: "",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },

    handleClose(done) {
      this.dialogVisible != this.dialogVisible;
    },
  },
};
</script>

<style lang='less' scope>
#nav {
  position: fixed;
  top: 0;
  z-index: 999;
  background-color: #fff;

  .head {
    display: flex;
    align-items: center;
    height: 65px;
    .left {
      img {
        width: 200px;
        height: 40px;
        line-height: 65px;
      }
    }
    .center {
      display: flex;
      flex: 1;
      font-size: 20px;
      line-height: 65px;
      a {
        display: block;
        color: #161e27 !important;
        padding: 0 15px;
      }
      a:hover {
        color: #fa2800 !important;
      }
    }
    div {
      .right {
        position: relative;
        img {
          padding: 0 15px;
          position: absolute;
          top: 1px;
          right: 65px;
          cursor: pointer;
        }
        a {
          padding-left: 15px;
          font-size: 16px;
          color: #161e27 !important;
        }
      }
    }
  }
  el-dialog {
    position: absolute;
    width: 300px;
    height: 300px;
  }
}
</style>